<template>
  <div class="echarts-box">
    <div id="chart1"></div>
    <div id="chart2"></div>
  </div>
</template>

<script setup>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent
} from 'echarts/components'
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
import {onMounted} from "vue"
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  PieChart,
  LegendComponent
])

let options1,options2
let myChart1,myChart2

onMounted(()=>{
  initChart1()
  initChart2()
})
const initChart1 = () => {
  const chartDom = document.getElementById('chart1')
  myChart1 = echarts.init(chartDom);
  options1 = {
    title: {
      text: '抚顺市乡镇面积占比(单位:平方千米)',
      left: 'center',
      textStyle: {
        // 文字颜色
        color: "#FFF",
      },
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        // left:'25%',
        data: [
          { value: 388.7, name: '新宾镇' },
          { value: 230.92, name: '旺清门镇' },
          { value: 526.31, name: '永陵镇' },
          { value: 349.53, name: '平顶山镇' },
          { value: 265.01, name: '大四平镇' },
          { value: 405.71, name: '苇子峪镇' },
          { value: 439.65, name: '木奇镇' },
          { value: 267.18, name: '上夹河镇' },
          { value: 95.65, name: '南杂木镇' },
          { value: 126.59, name: '红升乡' },
          { value: 141.87, name: '响水河子乡' },
          { value: 323.91, name: '红庙子乡' },
          { value: 246.54, name: '北四平乡' },
          { value: 177.67, name: '榆树乡' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  options1 && myChart1.setOption(options1);
}

const initChart2 = () => {
  const chartDom = document.getElementById('chart2')
  myChart2 = echarts.init(chartDom);
  options2 = {
    title: {
      text: '抚顺市林地各类型占比(单位:公顷)',
      left: 'center',
      textStyle: {
        // 文字颜色
        color: "#FFF",
      },
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: [
          { value: 736625.74, name: '乔木林地' },
          { value: 32338.46, name: '灌木林地' },
          { value: 52743.36, name: '其他林地' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  options2 && myChart2.setOption(options2);
}
</script>

<style scoped lang="less">
.echarts-box{
  position: absolute;
  z-index: 999;
  color: white;
  height: 89.5%;
  width: 21.3%;
  top: 8%;
  //padding-left: 1.5vw;
  box-sizing: border-box;
  margin-top: 2vh;
  left: 78%;
  background-color: rgba(224, 255, 255, 0.3);
  border-radius: 5px;
  padding-top: 2vh;
  display: flex;
  flex-direction: column;
  #chart1{
    margin-top: 2vh;
    height: 35vh;
    width: 21vw;
    margin-bottom: 5vh;
  }
  #chart2{
    height: 35vh;
    width: 21vw;
  }
}
</style>